<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { ElMessageBox } from 'element-plus'
import {usePlanStore} from '@/stores'

const data = ref([
  {
    "id": 1,
    "term": "2024-2025-2",
    "courseName": "数据结构与算法",
    "teacher": "李明",
    "location": "教学楼A301",
    "weeks": [1, 2, 3, 4, 5, 6, 7, 8, 9],
    "day": "周一",
    "slot": 1
  },
  {
    "id": 2,
    "term": "2024-2025-2",
    "courseName": "操作系统",
    "teacher": "王丽",
    "location": "教学楼B201",
    "weeks": [2, 4, 6, 8, 10, 12, 14, 16, 18],
    "day": "周一",
    "slot": 3
  },
  {
    "id": 3,
    "term": "2024-2025-2",
    "courseName": "计算机网络",
    "teacher": "张伟",
    "location": "教学楼C101",
    "weeks": [1, 2, 3, 4, 5, 6, 7, 8, 9],
    "day": "周二",
    "slot": 2
  },
  {
    "id": 4,
    "term": "2024-2025-2",
    "courseName": "数据库原理",
    "teacher": "刘芳",
    "location": "教学楼D202",
    "weeks": [10, 11, 12, 13,  14, 15, 16, 17, 18],
    "day": "周二",
    "slot": 3
  },
  {
    "id": 5,
    "term": "2024-2025-2",
    "courseName": "软件工程",
    "teacher": "陈刚",
    "location": "教学楼E301",
    "weeks": [10, 11, 12, 13,  14, 15, 16, 17, 18],
    "day": "周二",
    "slot": 4
  },
  {
    "id": 6,
    "term": "2024-2025-2",
    "courseName": "人工智能",
    "teacher": "赵敏",
    "location": "教学楼F201",
    "weeks": [2, 4, 6, 8, 10, 12, 14, 16, 18],
    "day": "周三",
    "slot": 5
  },
  {
    "id": 7,
    "term": "2024-2025-2",
    "courseName": "计算机组成原理",
    "teacher": "孙浩",
    "location": "教学楼G101",
    "weeks": [10, 11, 12, 13,  14, 15, 16, 17, 18],
    "day": "周四",
    "slot": 2
  },
  {
    "id": 8,
    "term": "2024-2025-2",
    "courseName": "离散数学",
    "teacher": "周艳",
    "location": "教学楼H202",
    "weeks": [2, 4, 6, 8, 10, 12, 14, 16, 18],
    "day": "周四",
    "slot": 3
  },
  {
    "id": 9,
    "term": "2024-2025-2",
    "courseName": "编译原理",
    "teacher": "吴磊",
    "location": "教学楼I301",
    "weeks": [10, 11, 12, 13,  14, 15, 16, 17, 18],
    "day": "周五",
    "slot": 2
  },
  {
    "id": 11,
    "term": "2024-2025-2",
    "courseName": "信息安全",
    "teacher": "郑晓",
    "location": "教学楼J201",
    "weeks": [2, 4, 6, 8, 10, 12, 14, 16, 18],
    "day": "周五",
    "slot": 4
  },
])

//明天课程
const tomorrowCourses = ref([])

onMounted(() => {
  const tomorrow = new Date()
  tomorrow.setDate(tomorrow.getDate() + 1)
  const tomorrowDay = tomorrow.getDay()

  const daysOfWeek = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']

  tomorrowCourses.value = data.value.filter(course => course.day === daysOfWeek[tomorrowDay])
})

//今日计划
const planStore = usePlanStore()
const flag = ref(false)
const flag2 = ref(false)
// const todayPlans = ref([])
const newPlan = ref({
  content: '',
  time: '',
  isTop: false
})

const addPlan = () => {
  if(newPlan.value.content === '' || newPlan.value.time === '') {
    ElMessage.warning('请填写完整信息')
    return
  }
  // 将新计划添加到todayPlans数组中
  if (newPlan.value.isTop) {
    // 如果置顶，则添加到数组前面
    // todayPlans.value.unshift({
    //   content: newPlan.value.content,
    //   time: newPlan.value.time,
    //   isTop: newPlan.value.isTop
    // })
    planStore.setTopPlan(newPlan.value)
  } else {
    // 如果不置顶，则添加到数组后面
    // todayPlans.value.push({
    //   content: newPlan.value.content,
    //   time: newPlan.value.time,
    //   isTop: newPlan.value.isTop
    // })
    planStore.setLastPlan(newPlan.value)
  }

  // 清空输入框
  newPlan.value.content = ''
  newPlan.value.time = ''
  newPlan.value.isTop = false
  flag.value = false
}

const addPlan2 = () => {
  if(newPlan.value.content === '' || newPlan.value.time === '') {
    ElMessage.warning('请填写完整信息')
    return
  }
  //更改计划
  planStore.editPlan(index.value,newPlan.value)
  ElMessage.success('修改成功')
  // 清空输入框
  newPlan.value.content = ''
  newPlan.value.time = ''
  newPlan.value.isTop = false
  index.value = null
  flag2.value = false
}

//更改计划
const index = ref(null)
const changePlan = (num,plan) => {
  flag2.value = true
  index.value = num
  newPlan.value.content = plan.content
  newPlan.value.time = plan.time
  newPlan.value.isTop = plan.isTop
}

// 计算今天与计划日期之间的差异
const calculateDaysDifference = (planDate) => {
  const today = new Date()
  today.setHours(0, 0, 0, 0) // 重置时间为当天凌晨，以便正确计算天数差异
  const planDateTime = new Date(planDate)
  const timeDifference = planDateTime - today
  const daysDifference = Math.ceil(timeDifference / (1000 * 60 * 60 * 24))
  return daysDifference
}

//显示课程
const showCourse = (course) => {
  ElMessageBox({
    title:'课程信息',
     message: `
      <p><strong>周次：</strong>${course.weeks.join(', ')}</p>
      <p><strong>课程名：</strong>${course.courseName}</p>
      <p><strong>地点：</strong>${course.location}</p>
      <p><strong>教师：</strong>${course.teacher}</p>
    `,
    dangerouslyUseHTMLString: true, // 允许消息内容使用HTML
    showCancelButton: false,
    confirmButtonText: '关闭',
  })
}
</script>

<template>
  <div>
    <div class="tomorrow">
      <div class="head">
        <h3>明日课程</h3>
      </div>
      <ul>
        <li v-for="course in tomorrowCourses" :key="course.id" @click = "showCourse(course)">
          <div>第{{course.slot}}大节</div>
          <div>{{ course.courseName }}</div>
          <div>{{ course.teacher }}</div>
          <div>{{ course.location }}</div>
        </li>
        <li v-if="tomorrowCourses.length === 0">
          <div>无课程</div>
          <div>好好休息休息</div>
        </li>
      </ul>
    </div>
    <div class="today">
      <div class="head">
        <h3>日程计划</h3>
        <span @click="flag = true">添加</span>
      </div>
      <ul>
        <li v-for="(plan, index) in planStore.todayPlans" :key="index" @click='changePlan(index,plan)'>
          <strong>{{ plan.isTop ? '重要' : '正常' }}</strong>
          <div>日期：{{ plan.time }}</div>
          <div>计划：{{ plan.content }}</div>
          <div>
            <!-- 显示距离的天数或“已结束” -->
            <span v-if="calculateDaysDifference(plan.time) > 0">
              距离{{ calculateDaysDifference(plan.time) }}天
            </span>
            <span v-else>已结束</span>
          </div>
        </li>
        <li v-if="planStore.todayPlans.length === 0">
          <div>暂无计划</div>
        </li>
      </ul>
    </div>


    <!-- 添加页面 -->
    <div class="add" v-if="flag">
      <div class="content">
        <div class="head">
          <h3>添加计划</h3>
          <span @click="flag = false">关闭</span>
        </div>
        <div>
          <label for="content">计划内容:</label>
          <input type="text" id="content" v-model="newPlan.content">
        </div>
        <div>
          <label for="time">计划时间:</label>
          <input type="date" id="time" v-model="newPlan.time">
        </div>
        <div>
          <label for="isTop">置顶:</label>
          <input type="checkbox" id="isTop" v-model="newPlan.isTop">
        </div>
        <button @click="addPlan">添加</button>
      </div>
    </div>

    <!-- 编辑页面 -->
    <div class="add" v-if="flag2">
      <div class="content">
        <div class="head">
          <h3>更改计划</h3>
          <span @click="flag2 = false">关闭</span>
        </div>
        <div>
          <label for="content">计划内容:</label>
          <input type="text" id="content" v-model="newPlan.content">
        </div>
        <div>
          <label for="time">计划时间:</label>
          <input type="date" id="time" v-model="newPlan.time">
        </div>
        <!-- <div>
          <label for="isTop">置顶:</label>
          <input type="checkbox" id="isTop" v-model="newPlan.isTop">
        </div> -->
        <button @click="addPlan2">更改</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.tomorrow,
.today{
  width: 100%;
  /* background-color: skyblue; */
  border: 2px solid skyblue;
  border-radius: 10px;
}

.tomorrow{
  height: calc(100vh / 5 * 1.4);
}

.today{
  margin-top: 15px;
  height: calc(100vh / 5 * 2.4);
}
ul{
  display: flex;
  padding: 0;
  margin: 0;
  height: calc(100% - 40px);
}
li{
  list-style: none;
  width: calc(100% / 6);
  height: calc(100% - 55px);
  background-color: #e2e2e2;
  border: 2px solid #ccc;
  border-radius: 5px;
  margin: 0 14px;
  overflow: hidden;
}
.head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
.head span{
  cursor: pointer;
  width: 40px;
  height: 24px;
  background-color: skyblue;
  border-radius: 5px;
  line-height: 24px;
  text-align: center;
  color: #FFF;
}
.add {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.add .content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  width: 300px;
}
.add input[type="text"] {
  margin-bottom: 10px;
  width: 100%;
  padding: 5px;
}
.add button {
  width: 100%;
  padding: 5px;
  background-color: skyblue;
  border: none;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  margin-top: 10px;
}
</style>

